<%@ Control Language="C#" AutoEventWireup="true" CodeFile="HotImage.ascx.cs" Inherits="HotImage_HotImage" %>

<table class="hotImageTable" cellpadding="0" cellspacing="0">
    <tr>
        <td style="width:242px; height:180px;">
            <div id="filterFade" style="filter:progid:DXImageTransform.Microsoft.Fade(duration=0.5,overlap=1.0 ); width:240; height:180; overflow:hidden;">
                <div style="display:block;"><a href="<%=GetNavigateUrl(0) %>"><img src="<%=GetImageUrl(0) %>" alt="<%=GetDescription(0) %>" width="240" height="180" onmouseover="clearAuto();" onmouseout="setAuto()" /></a></div>
                <div style="display:none;"><a href="<%=GetNavigateUrl(1) %>"><img src="<%=GetImageUrl(1) %>" alt="<%=GetDescription(1) %>" width="240" height="180" onmouseover="clearAuto();" onmouseout="setAuto()" /></a></div>
                <div style="display:none;"><a href="<%=GetNavigateUrl(2) %>"><img src="<%=GetImageUrl(2) %>" alt="<%=GetDescription(2) %>" width="240" height="180" onmouseover="clearAuto();" onmouseout="setAuto()" /></a></div>
                <asp:HiddenField ID="hfHotImage" runat="server" />
            </div>
        </td>
    </tr>
    <tr>
    <td class="hotImageInfoBar">
        <table style="width:242px; border-width:0px; text-align:center;" cellpadding="0" cellspacing="0">
            <tr>
                <td style="width:185px; padding-left:8px; text-align:left; vertical-align:middle;" onmouseover="clearAuto();" onmouseout="setAuto()">
                <div id="con">
                    <div style="display:block;"><a href="<%=GetNavigateUrl(0) %>" class="bla"><%=GetDescription(0) %></a></div>
                    <div style="display:none;"><a href="<%=GetNavigateUrl(1) %>" class="bla"><%=GetDescription(1) %></a></div>
                    <div style="display:none;"><a href="<%=GetNavigateUrl(2) %>" class="bla"><%=GetDescription(2) %></a></div>
                    </div>
                </td>
                <td style="width:57px;">
                    <table style="border-width:0px; text-align:center;" cellpadding="0" cellspacing="3" class="lhn" id="num">
                    <tr>
                    <td style="cursor:pointer; height:18px; width:14px;" class="bigon" onclick="Mea(0);" onmouseover="clearAuto();" onmouseout="setAuto()">1</td>
                    <td style="cursor:pointer; width:14px;" align="center" class="bigoff" onclick="Mea(1);" onmouseover="clearAuto();" onmouseout="setAuto()">2</td>
                    <td style="cursor:pointer; width:14px;" align="center" class="bigoff" onclick="Mea(2);" onmouseover="clearAuto();" onmouseout="setAuto()">3</td>
                    </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
    </tr>
</table>
<script language="javascript" type="text/javascript"> 
    var n=0;
    var showNum = document.getElementById("num");
    function Mea(value)
    {
	    n=value;
	    setBg(value);
	    plays(value);
	    cons(value);
    }

    function setBg(value)
    {
	    for(var i=0;i<3;i++)
        if(value==i)
        {
	        showNum.getElementsByTagName("td")[i].className='bigon';
        } 
	    else
	    {	
            showNum.getElementsByTagName("td")[i].className='bigoff';
        }  
    } 

    function plays(value)
    {
	    try
	    {
		    with (filterFade)
		    {
			    filters[0].Apply();
			    for(i=0;i<3;i++)i==value?children[i].style.display="block":children[i].style.display="none"; 
			    filters[0].play(); 
		    }
	    }
	    catch(e)
	    {
		    var divlist = document.getElementById("filterFade").getElementsByTagName("div");
		    for(i=0;i<3;i++)
		    {
			    i==value?divlist[i].style.display="block":divlist[i].style.display="none";
		    }
	    }
    }

    function cons(value)
    {
	    try
	    {
		    with (con)
		    {
				    for(i=0;i<3;i++)i==value?children[i].style.display="block":children[i].style.display="none"; 		
		    }
	    }
	    catch(e)
	    {
		    var divlist = document.getElementById("con").getElementsByTagName("div");
		    for(i=0;i<3;i++)
		    {
			    i==value?divlist[i].style.display="block":divlist[i].style.display="none";
		    }		
	    }
    }

    function clearAuto()
    {
        clearInterval(autoStart)
    }

    function setAuto()
    {
        autoStart=setInterval("auto(n)", 5000)
    }

    function auto()
    {
	    n++;
	    if(n>2)n=0;
	    Mea(n);
    }

    function sub()
    {
	    n--;
	    if(n<0)n=2;
	    Mea(n);
    } 
    setAuto(); 
</script>